<template>
	<div class="preview-img-box" v-show="imgUrl">
		<el-image
			:src="imgUrl"
			:zoom-rate="1.2"
			:preview-src-list="showFileList ? [imgUrl] : []"
			fit="cover"
			style="width: 100%; height: 100%"
		>
			<template v-slot:error>
				<el-tooltip class="box-item" effect="dark" :content="fileName" placement="top">
					<div class="image-slot tc">
						<img :src="iconWord" v-if="fileName.includes('.docx')" alt="点击下载" style="padding: 10px;height: 70%;" @click="handleDowload">
						<img :src="defaultFile" v-else alt="点击下载" style="padding: 10px;height: 70%;" @click="handleDowload">
            <p  @click="handleDowload"  class="f14 link-nowrap-text" >
							{{ fileName }}
						</p>
					</div>
				</el-tooltip>
			</template>
		</el-image>
		<div v-if="!onlyReady" class="operate-btn" @click.stop="handleDelete">
      <el-icon>
			  <icon-delete theme="outline" size="20" />
      </el-icon>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { DowloadPreviewImage } from '@/utils/util'
import defaultFile from '@/assets/icons/defaultFile.png'
import iconWord from '@/assets/imgs/icon-word.png'
import FileSaver from 'file-saver'

export default defineComponent({
	props: {
		src: {
			type: String,
		},
		onlyReady: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		showFileList: {
			type: Boolean,
		},
	},
	emits: ['delete'],
	setup(props, { emit }) {
		const imgUrl = ref('')
		const fileName: any = props.src ? decodeURIComponent(props.src).split('/').slice(-1).toString() : ''
		const getPreviewImage = async () => {
			if (props.src?.includes('ningxiang')) {
				const baseSrc = props.src.split(',')[0]
				const previewUrl = (await DowloadPreviewImage(baseSrc)) as string
				imgUrl.value = previewUrl
			} else {
				imgUrl.value = props.src
			}
		}
		watch(
			() => props.src,
			(val) => {
				getPreviewImage()
			},
			{
				immediate: true,
			}
		)
		const handleDelete = () => {
			emit('delete', props.src)
		}
		const handleDowload = () => {
      if(props.onlyReady) {
			  FileSaver.saveAs(imgUrl.value, fileName)
      }
		}

		return {
			imgUrl,
			fileName,
			defaultFile,
      iconWord,
			handleDelete,
			handleDowload,
		}
	},
})
</script>

<style scoped lang="scss">
.image-slot {
  margin-bottom: 10px;
  position: relative;
  .link-nowrap-text {
    width: calc(100% - 24px);
    overflow: hidden;
    position: absolute;
    bottom: -10px;
    left: 4px;
    text-wrap: nowrap;
    text-overflow:ellipsis;
  }
}
.preview-img-box {
  position: relative;
  box-shadow: 6px 5px 3px 2px #eee;
	&:hover {
		.operate-btn {
			visibility: visible;
		}
	}
}
.operate-btn {
	// visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
	position: absolute;
	// top: 90%;
	// left: 85%;
	// transform: translate(-50%, -50%);
  right: 0;
  bottom: 0px;
	background: #fd0808;
  color: #fff;
  padding: 3px;
  border-top-left-radius: 6px;
	&:hover {
		cursor: pointer;
	}
}
</style>